<template>
  <div>
    <div class="list" v-for="(item, index) in car" :key="index">
      <input type="checkbox" v-model="item.checked" />
      <van-card
        num="2"
        :price="item.prcie"
        :desc="item.word"
        :title="item.title"
        :thumb="item.src"
      >
        <template #footer>
          <van-stepper v-model="value"></van-stepper>
        </template>
      </van-card>
    </div>
    <van-submit-bar :price="totalCount" button-text="提交订单">
      <van-checkbox v-model="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      value: 1,
      car: [],
    }
  },
  computed: {
    checkAll: {
      get() {
        return this.car.every((item) => item.ischecked === true)
      },
      set(checked) {
        this.car.forEach((item) => (item.checked = checked))
      },
    },
    totalCount() {
      let totalCount = 0
      this.car.forEach((item) => {
        if (item.ischecked) {
          totalCount += item.count * item * price
        }
      })
      return totalCount * 100
    },
  },
  methods: {
    async getCar() {
      let resp = await axios.get('/api/car')
      this.car = resp.data.car
    },
  },

  created() {
    this.getCar()
  },
}
</script>
<style>
.list {
  width: 100%;

  display: flex;
}
</style>
